<template>
  <div class="data-auth-list">
    <el-card>
      <template #header>
        <div class="card-header">
          <h3>模块配置及数据权限配置</h3>
        </div>
      </template>

      <el-table :data="authList" border v-loading="loading">
        <el-table-column prop="id" label="ID编号" width="80" align="center" />
        <el-table-column prop="title" label="权限名称" width="200" />
        <el-table-column prop="name" label="权限标识" width="200" />
        <el-table-column prop="desc" label="描述" min-width="300" />
        <el-table-column label="操作" width="150" align="center">
          <template #default="scope">
            <el-button size="small" @click="handleView(scope.row)">查看</el-button>
            <el-dropdown>
              <el-button size="small">
                更多
                <el-icon><ArrowDown /></el-icon>
              </el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="handleEdit(scope.row)">编辑配置</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script setup lang="ts">
  import { ref, onMounted } from 'vue'
  import { ElMessage, ElMessageBox } from 'element-plus'
  import { getDataauthList as getDataAuthListApi } from '@/api/home/dataauth'
  import { useRouter } from 'vue-router'
  import { ArrowDown } from '@element-plus/icons-vue'

  // 数据相关
  const authList = ref([])
  const loading = ref(false)
  const router = useRouter()

  // 获取数据权限列表
  const getDataAuthList = async () => {
    try {
      loading.value = true
      // 使用新的API调用方式
      const response: any = await getDataAuthListApi()

      if (response.code === 0) {
        authList.value = response.data
      } else {
        ElMessage.error(response.msg || '获取数据权限列表失败')
      }
    } catch (error) {
      ElMessage.error('获取数据权限列表失败')
    } finally {
      loading.value = false
    }
  }

  // 查看权限详情
  const handleView = (row: any) => {
    // 使用弹窗展示权限详情
    ElMessageBox.alert(
      `
    <p><strong>ID编号:</strong> ${row.id}</p>
    <p><strong>权限名称:</strong> ${row.title}</p>
    <p><strong>权限标识:</strong> ${row.name}</p>
    <p><strong>描述:</strong> ${row.desc || '无'}</p>
  `,
      '查看权限',
      {
        dangerouslyUseHTMLString: true,
        confirmButtonText: '确定',
      }
    )
  }

  // 处理编辑
  const handleEdit = (row: any) => {
    // 根据权限标识跳转到对应的配置页面
    switch (row.name) {
      case 'contract_admin':
        router.push(`/home/dataauth/contract?id=${row.id}`)
        break
      case 'customer_admin':
        router.push(`/home/dataauth/customer?id=${row.id}`)
        break
      case 'finance_admin':
        router.push(`/home/dataauth/finance?id=${row.id}`)
        break
      case 'office_admin':
        router.push(`/home/dataauth/office?id=${row.id}`)
        break
      default:
        ElMessage.warning('该权限配置暂不支持编辑')
    }
  }

  // 初始化
  onMounted(() => {
    getDataAuthList()
  })
</script>

<style scoped>
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
</style>
